<template>
    <view class="flex-col homepage">
        <u-icon class="icon-checkmark-circle" name="checkmark-circle" :size="100" color="#006eff"></u-icon>
        <view class="u-line-1 text">预约成功</view>
        <view class="flex-col wrapper">
            <view class="flex-row wraper-row">
                <view class="u-line-1 text-two">就诊医院</view>
                <view class="u-line-1 text-three" v-if="!!nucleic.campus">{{nucleic.campus.campusName}}</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
            <view class="flex-row wraper-row">
                <view class="u-line-1 text-four">医院地址</view>
                <view class="u-line-1 text-five" v-if="!!nucleic.campus">{{nucleic.campus.campusAddress}}</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
            <view class="flex-row wraper-row">
                <view class="u-line-1 text-six">就诊科室</view>
                <view class="u-line-1 text-seven" v-if="!!nucleic.divisionType">{{nucleic.divisionType.divisionName}}</view>
            </view>
			<text v-if="isopen">
				<u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
				<view class="flex-row wraper-row">
					<view class="u-line-1 text-eight">预约项目</view>
					<view class="u-line-1 text-nine">{{nucleic.entryName}}</view>
				</view>
				<u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
				<view class="flex-row wraper-row">
					<view class="u-line-1 text-ten">预约时间</view>
					<view class="u-line-1 text-eleven">{{nucleic.visitTime}}</view>
				</view>
				<u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
				<view class="flex-row wraper-row-two">
					<view class="u-line-1 text-fourteen">￥{{nucleic.cost}}</view>
					<view class="u-line-1 text-fifteen">费用</view>
				</view>
			</text>
			<text v-if="isopens">
				<u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
				<view class="flex-row wraper-row">
					<view class="u-line-1 text-eight">预约项目</view>
					<view class="u-line-1 text-nine" v-if="!!nucleic.setMeal">{{nucleic.setMeal.setMealName}}</view>
				</view>
				<u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
				<view class="flex-row wraper-row">
					<view class="u-line-1 text-ten">预约时间</view>
					<view class="u-line-1 text-eleven">{{nucleic.createTime}}</view>
				</view>
				<u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
				<view class="flex-row wraper-row-two">
					<view class="u-line-1 text-fourteen" v-if="!!nucleic.setMeal">￥{{nucleic.setMeal.price}}</view>
					<view class="u-line-1 text-fifteen">费用</view>
				</view>
			</text>
        </view>
        <view class="flex-col wrapper-two">
            <view class="u-line-1 text-nineteen">就诊人</view>
            <view class="u-line-1 text-twenty" v-if="!!nucleic.thePatient">{{nucleic.thePatient.name}}</view>
            <u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
            <view class="u-line-1 text-20">身份证号</view>
            <view class="u-line-1 text-21" v-if="!!nucleic.thePatient">{{nucleic.thePatient.number}}</view>
            <u-line class="line-two"></u-line>
            <u-line class="line-three"></u-line>
            <u-line class="line-four"></u-line>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
				URL: 'http://localhost:9000/', //主域名
				nucleic:'',
				isopen:false,
				isopens:false
			}
        },
        methods: {
			
			//核酸详情
			nucleicDetails(id){
				uni.request({
					url: this.URL + "appointment/appointment/nucleic-acid/nucleicDetails/" + id,
					method:"GET",
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							this.nucleic = res.data.data.nucleic
							this.isopen = true
						}
						console.log(this.nucleic)
					}
				})
			},
			
			//体检详情
			medicaDetails(id){
				uni.request({
					url: this.URL + "appointment/appointment/medical-appointment/medicaDetails/" + id,
					method:"GET",
					success: (res) => {
						console.log("medicaDetails" , res)
						if (res.data.code == 20000) {
							this.nucleic = res.data.data.details	
							this.isopens = true
							console.log("medical" , this.nucleic)
						}
					}
				})	
			}

        },
		onLoad(options) {
			
			console.log('options.payId' , options.mId);
			console.log('options.brId' , options.nId);
			if(options.nId != 0){
				this.nucleicDetails(options.nId)
			}
			if(options.mId != 0){
				this.medicaDetails(options.mId)
			}
		}
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/

    .homepage {
        padding: 40rpx 25rpx 0rpx 25rpx;
        border-width: 30rpx;

        .icon-checkmark-circle {
            display: block;
            margin-right: auto;
            margin-bottom: 10rpx;
            margin-left: auto;
            font-size: 26rpx;
        }

        .text {
            width: 128rpx;
            margin-right: auto;
            margin-bottom: 30rpx;
            margin-left: auto;
            font-size: 32rpx;
        }

        .wrapper {
            width: 100%;
            margin-bottom: 30rpx;
            padding: 30rpx 0rpx 42rpx 24rpx;
            border-radius: 20rpx;
            background: #ffffff;

            .wraper-row {
                width: 660rpx;
                justify-content: space-between;
                margin-right: auto;
                margin-bottom: 30rpx;
                margin-left: auto;

                .text-two {
                    width: 132rpx;
                    font-size: 32rpx;
                    color: #aaaaaa;
                }

                .text-three {
                    width: 498rpx;
                    font-size: 32rpx;
                }
            }

            .line {
                width: 652rpx;
            }

            .wraper-row {
                width: 660rpx;
                justify-content: space-between;
                margin-right: auto;
                margin-bottom: 30rpx;
                margin-left: auto;

                .text-four {
                    width: 132rpx;
                    font-size: 32rpx;
                    color: #aaaaaa;
                }

                .text-five {
                    width: 498rpx;
                    font-size: 32rpx;
                }
            }

            .wraper-row {
                width: 660rpx;
                justify-content: space-between;
                margin-right: auto;
                margin-bottom: 30rpx;
                margin-left: auto;

                .text-six {
                    width: 132rpx;
                    font-size: 32rpx;
                    color: #aaaaaa;
                }

                .text-seven {
                    width: 498rpx;
                    font-size: 32rpx;
                }
            }

            .wraper-row {
                width: 660rpx;
                justify-content: space-between;
                margin-right: auto;
                margin-bottom: 30rpx;
                margin-left: auto;

                .text-eight {
                    width: 132rpx;
                    font-size: 32rpx;
                    color: #aaaaaa;
                }

                .text-nine {
                    width: 498rpx;
                    font-size: 32rpx;
                }
            }

            .wraper-row {
                width: 660rpx;
                justify-content: space-between;
                margin-right: auto;
                margin-bottom: 30rpx;
                margin-left: auto;

                .text-ten {
                    width: 132rpx;
                    font-size: 32rpx;
                    color: #aaaaaa;
                }

                .text-eleven {
                    width: 498rpx;
                    font-size: 32rpx;
                }
            }

            .wraper-row {
                width: 660rpx;
                justify-content: space-between;
                margin-right: auto;
                margin-bottom: 30rpx;
                margin-left: auto;

                .text-twelve {
                    width: 132rpx;
                    font-size: 32rpx;
                    color: #aaaaaa;
                }

                .text-thirteen {
                    width: 498rpx;
                    font-size: 32rpx;
                }
            }

            .wraper-row-two {
                width: 498rpx;
                margin: 0rpx 0rpx 30rpx 168rpx;

                .text-fourteen {
                    width: 100%;
                    font-size: 32rpx;
                    color: #f46c7e;
                }

                .text-fifteen {
                    width: 166rpx;
                    letter-spacing: 50rpx;
                    top: 0rpx;
                    left: -162rpx;
                    font-size: 32rpx;
                    position: absolute;
                    color: #aaaaaa;
                }
            }

            .wraper-row-three {
                width: 660rpx;
                justify-content: space-between;
                margin-right: auto;
                margin-left: auto;

                .text-sixteen {
                    width: 132rpx;
                    font-size: 32rpx;
                    color: #aaaaaa;
                }

                .text-seventeen {
                    width: 498rpx;
                    font-size: 32rpx;
                }
            }

            .text-eighteen {
                top: 114rpx;
                left: -24rpx;
                position: absolute;
            }
        }

        .wrapper-two {
            width: 100%;
            padding: 30rpx 0rpx 38rpx 24rpx;
            border-radius: 20rpx;
            background: #ffffff;

            .text-nineteen {
                width: 132rpx;
                margin: 0rpx 0rpx -38rpx 6rpx;
                letter-spacing: 12rpx;
                font-size: 32rpx;
                color: #aaaaaa;
            }

            .text-twenty {
                width: 498rpx;
                margin: 0rpx 0rpx 30rpx 168rpx;
                font-size: 32rpx;
            }

            .line {
                width: 652rpx;
            }

            .text-20 {
                width: 132rpx;
                margin: 0rpx 0rpx -38rpx 6rpx;
                font-size: 32rpx;
                color: #aaaaaa;
            }

            .text-21 {
                width: 498rpx;
                margin-left: 168rpx;
                font-size: 32rpx;
            }

            .line-two {
                width: 652rpx;
                bottom: -294rpx;
                left: 24rpx;
                position: absolute;
            }

            .line-three {
                width: 652rpx;
                bottom: -394rpx;
                left: 24rpx;
                position: absolute;
            }

            .line-four {
                width: 652rpx;
                bottom: -494rpx;
                left: 24rpx;
                position: absolute;
            }
        }
    }
</style>